<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易绘图工具</title>
    
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        /* 页面整体样式 */
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        /* 主容器样式 */
        .container {
            max-width: 1000px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        /* 头部样式 */
        header {
            background: linear-gradient(to right, #2c3e50, #4a6491);
            color: white;
            text-align: center;
            padding: 25px 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        /* 工具栏样式 */
        .toolbar {
            background-color: #f5f7fa;
            padding: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            border-bottom: 2px solid #e0e6ed;
        }
        /* 工具组样式 */
        .tool-group {
            display: flex;
            align-items: center;
            gap: 10px;
            background-color: white;
            padding: 8px 15px;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        /* 工具按钮样式 */
        .tool-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: none;
            background-color: #eef2f7;
            color: #4a5568;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 激活状态按钮样式 */
        .tool-btn:hover {
            background-color: #dbeafe;
            transform: translateY(-2px);
        }
        
        .tool-btn.active {
            background-color: #3b82f6;
            color: white;
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
        }
        
        .color-picker {
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        /* 尺寸控制 */
        .size-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .size-value {
            min-width: 30px;
            text-align: center;
            font-weight: 600;
            color: #4a5568;
        }
        /* 滑块 */
        input[type="range"] {
            width: 100px;
            height: 8px;
            -webkit-appearance: none;
            background: #e2e8f0;
            border-radius: 10px;
            outline: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        /* 操作按钮特殊 */
        .action-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #ef4444, #f97316);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }
        
        .action-btn.save {
            background: linear-gradient(to right, #10b981, #06b6d4);
        }
        
        .canvas-container {
            padding: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 500px;
        }
        /* 画布 */
        #drawingCanvas {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            cursor: crosshair;
            touch-action: none;
        }
        /* 操作提示 */
        .instructions {
            text-align: center;
            padding: 20px;
            color: #4a5568;
            background-color: #f8fafc;
            border-top: 2px solid #e0e6ed;
        }
        
        .instructions p {
            margin: 5px 0;
            font-size: 1rem;
        }
        /* 预设颜色 */
        .colors {
            display: flex;
            gap: 8px;
        }
        
        .color-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: transform 0.2s;
        }
        
        .color-option:hover {
            transform: scale(1.2);
        }
        /* 页脚 */
        footer {
            text-align: center;
            color: white;
            padding: 20px;
            font-size: 1rem;
            margin-top: 20px;
            opacity: 0.8;
        }
        /* 响应式设计 */
        @media (max-width: 768px) {
            .toolbar {
                justify-content: center;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .tool-group {
                padding: 6px 10px;
            }
            
            #drawingCanvas {
                width: 100%;
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="container">
        <header>
            <h1><i class="fas fa-paint-brush"></i> 简易绘图工具</h1>
            <p class="subtitle">使用画笔和橡皮擦创作你的艺术作品，完成后可保存至本地</p >
        </header>
        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="tool-group">
                <button class="tool-btn active" id="pencilBtn" title="画笔">
                    <i class="fas fa-pencil-alt"></i>
               <!-- 画笔按钮 -->
                </button>

                <button class="tool-btn" id="eraserBtn" title="橡皮擦">
                    <i class="fas fa-eraser"></i>
                </button><!-- 橡皮擦钮 -->
            </div>
            
            <div class="tool-group">
                <input type="color" class="color-picker" id="colorPicker" value="#3b82f6" title="选择颜色">
                <div class="colors">
                    <div class="color-option" style="background-color: #ef4444;" data-color="#ef4444"></div>
                    <div class="color-option" style="background-color: #10b981;" data-color="#10b981"></div>
                    <div class="color-option" style="background-color: #f59e0b;" data-color="#f59e0b"></div>
                    <div class="color-option" style="background-color: #8b5cf6;" data-color="#8b5cf6"></div>
                </div>
            </div>
            
            <div class="tool-group">
                <div class="size-control">
                    <span class="size-value" id="brushSize">5</span>
                    <input type="range" id="brushSizeSlider" min="1" max="50" value="5">
                </div>
            </div>
            <!-- 画笔尺寸控制 -->
            <div class="tool-group">
                <button class="action-btn" id="clearBtn">
                    <i class="fas fa-trash-alt"></i> 清空画布
                </button>
                <button class="action-btn save" id="saveBtn">
                    <i class="fas fa-download"></i> 保存图像
                </button>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="canvas-container">
            <canvas id="drawingCanvas" width="800" height="500"></canvas>
        </div>
        
        <div class="instructions">
            <p><i class="fas fa-lightbulb"></i> 提示：按住鼠标左键并拖动进行绘制，使用橡皮擦可擦除内容</p >
            <p>调整右侧滑块可改变画笔/橡皮擦大小</p >
        </div>
    </div>
    <!-- 页脚 -->
    <footer>
        <p>简易绘图工具 &copy; 2023 | 使用HTML5 Canvas实现</p >
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('drawingCanvas');
            const ctx = canvas.getContext('2d');
            const pencilBtn = document.getElementById('pencilBtn');
            const eraserBtn = document.getElementById('eraserBtn');
            const colorPicker = document.getElementById('colorPicker');
            const brushSizeSlider = document.getElementById('brushSizeSlider');
            const brushSizeDisplay = document.getElementById('brushSize');
            const clearBtn = document.getElementById('clearBtn');
            const saveBtn = document.getElementById('saveBtn');
            const colorOptions = document.querySelectorAll('.color-option');
            
            let isDrawing = false;
            let currentTool = 'pencil';
            let currentColor = '#3b82f6';
            let brushSize = 5;
            
            // 初始化画布
            function initCanvas() {
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.strokeStyle = currentColor;
                ctx.lineWidth = brushSize;
            }
            
            // 开始绘制
            function startDrawing(e) {
                isDrawing = true;
                draw(e);
            }
            
            // 绘制中
            function draw(e) {
                if (!isDrawing) return;
                
                // 处理触摸事件
                if (e.type.includes('touch')) {
                    e.preventDefault();
                    const touch = e.touches[0];
                    e = {
                        offsetX: touch.clientX - canvas.getBoundingClientRect().left,
                        offsetY: touch.clientY - canvas.getBoundingClientRect().top
                    };
                }
                
                ctx.beginPath();
                ctx.moveTo(e.offsetX, e.offsetY);
                
                // 设置橡皮擦效果
                if (currentTool === 'eraser') {
                    ctx.globalCompositeOperation = 'destination-out';
                } else {
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.strokeStyle = currentColor;
                }
                
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }
            
            // 停止绘制
            function stopDrawing() {
                isDrawing = false;
            }
            
            // 设置工具
            function setTool(tool) {
                currentTool = tool;
                
                if (tool === 'pencil') {
                    pencilBtn.classList.add('active');
                    eraserBtn.classList.remove('active');
                } else {
                    eraserBtn.classList.add('active');
                    pencilBtn.classList.remove('active');
                }
            }
            
            // 设置颜色
            function setColor(color) {
                currentColor = color;
                colorPicker.value = color;
                ctx.strokeStyle = color;
            }
            
            // 设置画笔大小
            function setBrushSize(size) {
                brushSize = size;
                ctx.lineWidth = size;
                brushSizeDisplay.textContent = size;
            }
            
            // 清空画布
            function clearCanvas() {
                if (confirm('确定要清空画布吗？')) {
                    ctx.fillStyle = 'white';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                }
            }
            
            // 保存图像
            function saveImage() {
                const link = document.createElement('a');
                link.download = '我的绘图作品.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            }
            
            // 事件监听器
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);
            
            // 触摸事件支持
            canvas.addEventListener('touchstart', startDrawing);
            canvas.addEventListener('touchmove', draw);
            canvas.addEventListener('touchend', stopDrawing);
            
            pencilBtn.addEventListener('click', () => setTool('pencil'));
            eraserBtn.addEventListener('click', () => setTool('eraser'));
            
            colorPicker.addEventListener('input', (e) => setColor(e.target.value));
            
            brushSizeSlider.addEventListener('input', (e) => {
                setBrushSize(parseInt(e.target.value));
            });
            
            colorOptions.forEach(option => {
                option.addEventListener('click', () => {
                    setColor(option.dataset.color);
                });
            });
            
            clearBtn.addEventListener('click', clearCanvas);
            saveBtn.addEventListener('click', saveImage);
            
            // 初始化
            initCanvas();
        });
    </script>
</body>
</html>